<template>
	<view class="post-container">
		<view class="post-head" :style="{ paddingTop: barHeight + 'rpx' }">
			<view class="head-top">
				<image src="@/static/img/arr.png" mode="" @click="goto"></image>
				<text class="title">我要招人</text>
			</view>
			<view class="post-main">
				<view class="main-one">
					<view class="one-title">基本信息</view>
					<view class="one-form">
						<view class="form-item"
						 v-for="(item, index) in form.formLabelOne"
						 :key="index">
							<view class="item-label"><text style="color: red;">*</text>{{ item.label }} </view>
							<view class="item-type">
								<view class="type-ips" v-if="item.type === 'inputse'">
									<uni-easyinput :disabled="radio1=== 0" v-model="form.formData[item.prop]" :clearable="false" type="text" placeholder="请输入"></uni-easyinput>
									<uni-data-checkbox v-model="radio1" :localdata="compData" @change='changeGs'></uni-data-checkbox>
								</view>
								<view @click="openGw" style="width: 100%;height: 40rpx;" v-if="item.type === 'zw'">{{ form.formData.positionName ? form.formData.positionName : '请选择' }}</view>
								<uni-easyinput :clearable="false" v-model="form.formData[item.prop]"  v-if="item.type === 'input'"  text placeholder="请输入"></uni-easyinput>
								<uni-easyinput :clearable="false" v-model="form.formData[item.prop]"  v-if="item.type === 'inputl'"  text placeholder="请输入"></uni-easyinput>
								<uni-easyinput :clearable="false" v-model="form.formData[item.prop]"  v-if="item.type === 'inputd'"  text placeholder="请输入"></uni-easyinput>
								<picker style="width: 100%;height: 40rpx;" v-if="item.type === 'picker'" :value="item.index2" mode="selector" range-key="name" :range="item.range" @change="bindPickerChange">
									<view>{{  item.range && item.range[item.index2] ? item.range[item.index2].name : '请选择'}}</view>
								</picker>	
								<picker style="width: 100%;height: 40rpx;" v-if="item.type === 'pickers'" :value="item.index2"  mode="selector" range-key="name" :range="item.range" @change="bindPickerChanget">
									<view>{{item.range && item.range[item.index2] ? item.range[item.index2].name : '请选择'}}</view>
								</picker>		
								<picker style="width: 100%;height: 40rpx;" v-if="item.type === 'pickerfs'" :value="item.index2"  mode="selector" range-key="name" :range="item.range" @change="bindPickerChanget">
									<view>{{item.range && item.range[item.index2] ? item.range[item.index2].name : '请选择'}}</view>
								</picker>
							</view>
							<image src="@/static/img/common/rrr.png" mode="" v-if="item.type !=='input' && item.type !=='inputse'"></image>
						</view>
						<view class="form-item" v-if="isShow">
							<view class="item-label"><text style="color: red;">*</text>结算方式</view>
							<view class="item-type">
								<picker style="width: 100%;height: 40rpx;":value="form.formLabelOne1[0].index2"  mode="selector" range-key="name" :range="form.formLabelOne1[0].range" @change="bindPickerfs">
									<view>{{form.formLabelOne1[0].range && form.formLabelOne1[0].range[form.formLabelOne1[0].index2] ? form.formLabelOne1[0].range[form.formLabelOne1[0].index2].name : '请选择'}}</view>
								</picker>
							</view>
						</view>	
						<view class="form-item" v-if="isShow">
							<view class="item-label"><text style="color: red;">*</text>工作量</view>
							<view class="item-types">
								<uni-easyinput :clearable="false" v-model="form.formData.workDays" type="number" placeholder="请输入"></uni-easyinput>/
								<uni-easyinput :clearable="false" v-model="form.formData.unitText"  text placeholder="请输入单位"></uni-easyinput>
							</view>
						</view>			
					<!-- 	<view class="form-item" v-if="isShow">
							<view class="item-label">单位</view>
							<view class="item-type">
								<uni-easyinput :clearable="false" v-model="form.formData.unit"  text placeholder="请输入"></uni-easyinput>
							</view>
						</view> -->
						<view class="form-item" v-if="!isShow">
							<view class="item-label"><text style="color: red;">*</text>工作地点</view>
							<view class="item-type">
								<uni-easyinput :clearable="false" v-model="form.formData.workAddress" type="text" placeholder="请输入"></uni-easyinput>
							</view>
						</view>
					</view>
				</view>
				<view class="main-one" >
					<view class="one-title">任职要求</view>
					<view class="one-form">
						<view class="form-item"
							 v-for="(item, index) in form.formLabelTwo"
							 :key="index">
								<view class="item-label">{{ item.label }} </view>
								<view class="item-type">
									<view class="" v-if="item.type === 'inputs'">
										<uni-easyinput v-model="form.formData[item.prop]" :clearable="false" type="text" placeholder="请输入"></uni-easyinput>
									</view>
									<view class="type-ipt"  v-if="item.type === 'input'">
										<uni-easyinput v-model="form.formData.ageMin" :clearable="false" type="number" placeholder="请输入"></uni-easyinput>
										<text class="mg-rt10">-</text>
										<uni-easyinput v-model="form.formData.ageMax" :clearable="false" type="number" placeholder="请输入"></uni-easyinput>
										<text>岁</text>
									</view>
									<picker style="width: 100%;height: 40rpx;" v-if="item.type === 'picker'" :value="item.index2" mode="selector" range-key="name" :range="item.range" @change="bindPickerXl">
										<view>{{item.range && item.range[item.index2] ? item.range[item.index2].name : '请选择'}}</view>
									</picker>	
									<view class="time" v-if="item.type === 'time'" @click="openTime">{{ form.lsData.time }}</view>
								</view>
								<image src="@/static/img/common/rrr.png" mode="" v-if="item.type !=='input' && item.type !=='inputs'"></image>
							</view>
					</view>
				</view>
				<view class="main-one">
					<view class="one-title"><text style="color: red;">*</text>薪资</view>
					<view class="one-form">
						<view class="form-item">
							<view class="item-label">薪资范围</view>
							 <view class="item-type">
								<view class="type-ipt">
									<uni-easyinput v-model="form.formData.salaryMin" :clearable="false" type="number" placeholder="请输入"></uni-easyinput>
									<text class="mg-rt10">-</text>
									<uni-easyinput v-model="form.formData.salaryMax" :clearable="false" type="number" placeholder="请输入"></uni-easyinput>
									<text>元</text>
								 </view>
								</view>
							</view>
					</view>
				</view>
				<view class="main-one">
					<view class="one-title">工作要求</view>
					<view class="one-form">
						<view class="form-item">
							<view class="text-ipt">
								<uni-easyinput type="textarea" maxlength="300"  v-model="form.formData.workPositionDesc" placeholder="请输入"></uni-easyinput>
							</view>
						</view>
					</view>
				</view>
				<timeSlot 
				    ref="timeslot"
				    :title="'选择时间段'"
				    @confirm="confirmTime"/>
			</view>
			<view class="btn">
				<text class="one" @click.stop="jump(1)">暂存</text>
				<text class="two" @click.stop="jump(2)">发布</text>
			</view>
			<!-- 职位选择 -->
			<uni-popup ref="zwRef">
				<view class="zw-content">
				 <scroll-view scroll-y="true" style="flex: 2; height: 100%;border-right: 1rpx solid #ddd;">
				 	<view class="zw-left"
					 v-for="(item, index) in zwData.communityListArray"
					 :key="index"
					 @click="jumpItem(item)">{{ item.name }}</view>
				 </scroll-view> 
				 <scroll-view scroll-y="true" style="flex: 3.5; height: 100%;border-right: 1rpx solid #ddd;" >
				 	<view class="zw-right"
					v-for="(item, index) in zwData.selectData"
					:key="index"
					@click="jumpZw(item)">
						{{ item.name }}
					</view>
				 </scroll-view>
				 <scroll-view scroll-y="true" style="flex: 3.5; height: 100%;" >
				 	<view class="zw-right"
					v-for="(item, index) in zwData.selectDataTwo"
					:key="index"
					@click="jumpZws(item)">
						{{ item.name }}
					</view>
				 </scroll-view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
import navBar from '@/components/navBar.vue'	
import { ref, reactive, onMounted } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import commonNavBar from "@/components/commonNavBar.vue";
import scrollView from "@/components/scrollView.vue";
import { getStatusBarHeight } from '@/utils/common/common.js'
import timeSlot from "@/components/wanghexu-timeslot/wanghexu-timeslot.vue"
import { showToast } from '@/utils/toast.js'
import api from '@/utils/api/recruit.js'
const barHeight = ref(null)	
const title = ref('发布职位')
const timeslot = ref(null)
onLoad(res => {
	if(res.data){
		isEdit.value = true
		let obj = JSON.parse(res.data)
		console.log(obj);
    let workIndex = form.formLabelOne[0].range.findIndex(item=>item.value == obj.workType)
		form.formLabelOne[0].index2 = workIndex
    let workAddressIndex = form.formLabelOne[2].range.findIndex(item=>item.value == obj.workAddressType)
		form.formLabelOne[2].index2 = workAddressIndex
    let requireIndex = form.formLabelTwo[0].range.findIndex(item=>item.value == obj.requireEdu)
		form.formLabelTwo[0].index2 = requireIndex
    let salaryIndex = form.formLabelOne1[0].range.findIndex(item=>item.value == obj.salarySettleType)
		form.formLabelOne1[0].index2 = salaryIndex
		form.lsData.time = obj.startWorkDate ? `${obj.startWorkDate}-${obj.endWorkDate}` : ''
		isShow.value = obj.workType === 'FULL_TIME' ? false : true
		radio1.value = obj.corporateName === '个人' ? 0 : 1
		form.formData = obj
	}
	barHeight.value = getStatusBarHeight()

})
onMounted(_ => {
	getList()
	// timeslot.value.open()
})
const compData = ref([
	{ text: '个人', value: 0 },
	{ text: '公司', value: 1 },
])
const radio1 = ref(null)
const zwRef = ref(null)
// 职位数据
const zwData = reactive({
	  communityListArray : [],
		selectData: [],
		selectDataTwo: [],
	// 默认选择的索引
	  multiIndex : ''
})
const isEdit = ref(false)
// 数据
const form = reactive({
	lsData: {
		
	},
	formLabelOne: [
		{ label: '招聘类型', prop: 'workType', type: 'picker',range: [{name: '全职', value: 'FULL_TIME'}, {name: '兼职', value: 'PART_TIME_JOB'}], index2: '' },
		{ label: '职位名称', prop: 'positionName', type: 'zw',  },
		{ label: '工作方式', prop: 'workAddressType', type: 'pickers',index2: '' ,range: [{name: '线下', value: 'OFFLINE'}, {name: '线上', value: 'ONLINE'}] },
		{ label: '公司名称', prop: 'corporateName', type: 'inputse',  },
	],
	formLabelOne1: [
		{ label: '结算方式', prop: 'salarySettleType', type: 'pickerfs',index2: '' ,range: [{name: '单结', value: 'SINGLE_SETTLEMENT'}, {name: '日结', value: 'DAILY_SETTLEMENT'}, {name: '月结', value: 'MONTHLY_SETTLEMENT'}] },
		{ label: '工作量', prop: 'workDays', type: 'inputl',  },
		{ label: '工作地点', prop: 'workAddress', type: 'inputd',  },
	],
	formLabelTwo: [
		{ label: '最低学历', prop: 'requireEdu', type: 'picker',index2: '',
		range: [
			{name: '不限', value: 'NONE'},{name: '小学', value: 'PRIMARY_SCHOOL'}, {name: '初中', value: 'JUNIOR_HIGH_SCHOOL'},
			{name: '高中/中专/技校', value: 'HIGH_SCHOOL'}, {name: '大专', value: 'JUNIOR_COLLEGE'},
			{name: '本科', value: 'UNDERGRADUATE'}, {name: '研究生', value: 'GRADUATE_STUDENT'},
			{name: '博士', value: 'DOCTOR'}, {name: '教授/专家', value: 'PROFESSOR'},
			] },
		{ label: '年龄范围', prop: '', type: 'input' },
		{ label: '技能/特长', prop: 'requireSkill', type: 'inputs' },
		{ label: '工作时间', prop: '', type: 'time' },
	],
	formData: {  }
})
// 打开时间
const openTime = _ => {
	timeslot.value.open()
}
const confirmTime = e => {
	form.formData.startWorkDate = `${e.start.hour}:${e.start.min}`
	form.formData.endWorkDate = `${e.end.hour}:${e.end.min}`
	form.lsData.time = `${e.start.hour}:${e.start.min}-${e.end.hour}:${e.end.min}`
}
// 选择类型
const bindPickerChange = (e) => {
	let index = e.detail.value
	isShow.value = index === 0 ? false : true
	form.formLabelOne[0].index2 = index
	form.formData.workType = form.formLabelOne[0].range[index].value
}
// 公司类型选择
const changeGs = _ => {
	if(radio1.value === 0){
		form.formData.corporateName = '个人'
	} else {
		form.formData.corporateName = ''
	}
}
// 选择工作方式
const bindPickerChanget = (e) => {
	let index = e.detail.value
	form.formLabelOne[2].index2 = index
	form.formData.workAddressType = form.formLabelOne[2].range[index].value
}
// 选择学历
const bindPickerXl = e => {
	let index = e.detail.value
	form.formLabelTwo[0].index2 = index
	form.formData.requireEdu = form.formLabelTwo[0].range[index].value
}
// 结算方式
const bindPickerfs = e => {
	let index = e.detail.value
	form.formLabelOne1[0].index2 = index
	form.formData.salarySettleType = form.formLabelOne1[0].range[index].value
}
const  validateNumberInput = (e) => {
	if(e<1){
		 showToast('输入的值不能小于1')
		 startAge.value = ''
		 // startAge.value = 1
		 //  startAge.value = 3
		 console.log(startAge.value);
	}
}
const isShow = ref(false)
// 暂存/发布
const jump = async index => {
	if(!form.formData.workType){ return showToast('请选择招聘类型')}
	if(!form.formData.positionName){ return showToast('请选择职位')}
	if(!form.formData.workAddressType){ return showToast('请选择工作方式') }
	if(!form.formData.corporateName){ return showToast('请填写公司名称') }
	if(form.formData.workType === 'FULL_TIME' && !form.formData.workAddress){ return showToast('请输入工作地点') }
	if(form.formData.workType === 'PART_TIME_JOB' && !form.formData.salarySettleType){ return showToast('请选择结算方式') }
	if(form.formData.workType === 'PART_TIME_JOB' && !form.formData.workDays){ return showToast('请输入工作量') }
	if(index === 1) {
		form.formData.positionState  = 'SUSPEND'
		const res = await api.saveOrUpdatePosition({appPublishPosition: form.formData})
		if(res.code === 200) {
			showToast(res.msg)
			uni.$emit('refsh')
			isEdit.value ? uni.navigateTo({ url:'/pages/positionManagement/positionManagement' }) : uni.navigateBack()
		}
	} else {
		form.formData.positionState  = 'RELEASE'
		const res = await api.saveOrUpdatePosition({appPublishPosition: form.formData})
		if(res.code === 200) {
			showToast(res.msg)
			uni.$emit('refsh')
			isEdit.value ? uni.navigateTo({ url:'/pages/positionManagement/positionManagement' }) : uni.navigateBack()
		}
	}
}
// 点击每一项
const jumpItem =  async (item) => {
	const res = await api.viewPosition(item.id);
	zwData.selectData = res.data;
}
// 打开职位选择
const openGw = _ => zwRef.value.open('bottom')
// 获取职位列表
const getList = async _ => {
	const res = await api.viewPosition(0);
	zwData.communityListArray = res.data;
}
const jumpZw = async (item) => {
	const res = await api.viewPosition(item.id);
	zwData.selectDataTwo = res.data;
}
const jumpZws = async (item) => {
	zwRef.value.close()
	const res = await api.viewPosition(item.id);
	form.formData.positionName = item.name;
	form.formData.positionId = item.id
}
const goto = _ => uni.navigateBack()
</script>

<style lang="scss" scoped>
::v-deep .uni-data-checklist .checklist-group{
	flex-wrap: nowrap !important;
}	
::v-deep .uni-data-checklist .checklist-group .checklist-box{
	margin-right: 10rpx !important;
}	
.zw-content{
	padding: 20rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	height: 90vh;
	// margin-top: calc(var(--status-bar-height) + 10rpx);
	// align-items: center;
	.zw-left{
		padding: 10rpx;
		&:hover{
			background: #ddd;
		}
	}
	.zw-right{
		padding: 10rpx;
		&:hover{
			background: #ddd;
		}
	}
	// height: 0rpx;
}		
.navBarTop{
	// background: transparent !important;
}	
::v-deep .is-input-border{
	border: none !important;
		background: transparent !important;
}
::v-deep .uni-easyinput__content-input{
	height: 30rpx !important;
	padding-left: 0 !important;
}
.post-container{
	height: 100vh;
	background: #fff;

	.post-head{
		width: 750rpx;
		// height: 431rpx;
		background: url('@/static/img/common/zrbg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
			padding-bottom: 180rpx;
		
		.head-top{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 750rpx;
			height: 88rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			image{
				width: 36rpx;
				height: 36rpx;
			}
			.title{
				width: 100%;
				flex: 1;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 32rpx;
				color: #333333;
				line-height: 48rpx;
				// text-align: center;
				font-style: normal;
				text-transform: none;
				margin-left: 269rpx;
			}
		}
		.post-main{
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			.main-one{
				.one-title{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-bottom: 24rpx;
				}
				.one-form{
					width: 100%;
					.form-item{
						width: 100%;
						width: 702rpx;
						margin-bottom: 24rpx;
						// height: 90rpx;
						background: #F4F6FA;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						display: flex;
						align-items: center;
						padding: 28rpx 32rpx;
						box-sizing: border-box;
						.item-label{
							display: flex;
							align-items: center;
						}
						.text-ipt{
							flex: 1;
						}
						.item-types{
							flex: 1;
							display: flex;
							align-items: center;
							margin-left: 48rpx;
						}
						.item-type{
							flex: 1;
							// width: 70%;
							margin-left: 48rpx;
							.type-ips{
								width: 100%;
								display: flex;
								align-items: center;
							}
							.type-ipt{
								display: flex;
								align-items: center;
							}
							.time{
								width: 100%;
								height: 40rpx;
							}
						}
						image{
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}
		}
	}
	.btn{
		position: fixed;
		bottom: 0;
		left: 0;
		height: 180rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;
		width: 100%;
		display: flex;
		.one{
			width: 200rpx;
			height: 88rpx;
			background: #E4E2FC;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 32rpx;
			color: #6B64D3;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			
		}
		.two{
			width: 486rpx !important;
			height: 88rpx !important;
			background: #6B64D3;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			margin-left: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
}
</style>
